<template>
  <div id="list">
   <h3>您正在做的业务是：库存管理--安全库存配置管理--制定安全库存配置单查询</h3>
   <!--查询表单-->
   <el-form :inline="true" :model="searchObj" class="demo-form-inline">
     <el-form-item label="请选择I级分类">
	   <el-select v-model="searchObj.search_firstKindId" autocomplete="off" placeholder="请选择">
	   	 <!-- <el-option v-for="item in searchObj" :key="item.id" :label="item.search_firstKindid" :value="item.id"></el-option> -->
		<el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
	   </el-select>
     </el-form-item><br/>
     <el-form-item label="请选择II级分类">
	   <el-select v-model="searchObj.search_secondKindId" autocomplete="off" placeholder="请选择">
	   	<el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
	   </el-select>
     </el-form-item><br/>
	 <el-form-item label="请选择III级分类">
	   <el-select v-model="searchObj.search_thirdKindId" autocomplete="off" placeholder="请选择">
		<el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value"></el-option>
	   </el-select>
	 </el-form-item><br/>
	 <el-form-item label="请输入建档时间">
	   <el-date-picker
	     v-model="searchObj.search_registerTime1"
	     type="datetime"
	     value-format="yyyy-MM-dd HH:mm:ss"
	     format="MM/dd/yyyy HH:mm:ss"
	     placeholder="选择日期">
	   </el-date-picker>--
	   <el-date-picker
	     v-model="searchObj.search_registerTime2"
	     type="datetime"
	     value-format="yyyy-MM-dd HH:mm:ss"
	     format="MM/dd/yyyy HH:mm:ss"
	     placeholder="选择日期">
	   </el-date-picker>
	 </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="selBtn">查询</el-button>
       <el-button type="warning" @click="">添加</el-button>
     </el-form-item>
   </el-form>
   
    <!--已经复核通过的安全库存配置单数据表格-->
    <el-table
      :data="storageCellAry"
      style="width: 100%">
      <el-table-column
        prop="storeId"
        label="配置单编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="productId"
        label="产品编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="产品名称"
        width="180">
      </el-table-column>
	  <el-table-column
	    prop="firstKindName"
	    label="I级分类"
	    width="180">
	  </el-table-column>
	  <el-table-column
	    prop="secondKindName"
	    label="II级分类"
	    width="180">
	  </el-table-column>
	  <el-table-column
	    prop="thirdKindName"
	    label="III级分类"
	    width="180">
	  </el-table-column>
      <el-table-column
        prop="checkTag"
        label="审核状态"
        width="180">
		<template slot-scope="scope">
			<span v-if="scope.row.checkTag=='S001-0'">等待审核</span>
			<span v-if="scope.row.checkTag=='S001-1'">审核通过</span>
			<span v-if="scope.row.checkTag=='S001-2'">审核不通过</span>
		</template>
      </el-table-column>
      <!--操作列-->
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
		  type="warning"
		  round
		  icon="el-icon-edit"
          @click="">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
		  round
		  icon="el-icon-edit"
          @click="">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!---分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
	
  </div>
</template>

<script>

export default {
  name: 'list',
  data() {
    return  {
      storageCellAry: [],
      // 当前页号
      pageNo: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 查询条件对象
      searchObj: {
        search_firstKindId:"",
		search_secondKindId:"",
		search_thirdKindId:"",
		search_registerTime1:"",
		search_registerTime2:""
      },
	  // lable宽度
	  formLabelWidth: '120px',
	  option1: [{
	  	 value: '01',
	  	 label: '电子'
	  }],
	  option2: [{
	  	 value: '01',
	  	 label: '电子/计算机'
	  }],
	  option3: [{
	  	 value: '01',
	  	 label: '电子/计算机/服务器'
	  }]
    }
  },
  methods: {
    // 表单查询
    search() {
      // 查询
      this.pageNo = 1
      this.storageCellPage()
    },
    // 页大小改变
    handleSizeChange(val) {
        this.pageSize = val
        this.storageCellPage()
    },
    // 页号改变
    handleCurrentChange(val) {
      this.pageNo = val
      // 重新查询
      this.storageCellPage()
    },
     // 分页查询班级信息
    async storageCellPage() {
      // 用es6的解构函数
      const {data: res} = await this.$http.post
      (`/design/storage/list/${this.pageNo}/${this.pageSize}`,this.searchObj)
      this.storageCellAry = res.rows
      this.total = res.total
    },
	selBtn(){
		this.storageCellPage()
		}
	},
	created() {
		this.storageCellPage()
  }
}
</script>

<style>

</style>
